<template>
  <div class="Person_2">
    <p>Age: {{ age }}</p>
    <p>Occupation: {{ occupation }}</p>
    <button @click="showname">查看姓名</button>
    <button @click="changename">修改姓名</button>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Person_2',

  setup() {
    // You can add any setup logic here if needed
    //数据
    let name = 'John Doe'
    const age = 30
    const occupation = 'Software Developer'
    //方法
    function changename() {
      name = 'zhang_san'
    }
    const showname = () => {
      alert(name)
    }
    return {
      name,
      age,
      occupation,
      showname,
      changename,
    }
    // return () => 'hah'
  },
}
</script>
<style>
.Person_2 {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background-color: #2196f3;
  color: white;
}
</style>
